<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>
        选择用户
    </title>
    <link type="text/css" rel="stylesheet" th:href="@{/js/jquery-ui/css/jquery-ui.my.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/skin/common.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/skin/common/user_multi_sel.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/js/jstree/themes/default/style.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/js/msdropdown/dd.css}"/>
    <style>
        /*html {
            zoom: 90%
        }*/
        .ui-widget-header {
            color: #1c94c4;
            border: 1px solid #d7d7d7;
            background: #e7f5f9;
        }
        .jstree-default .jstree-wholerow-clicked {
            background: #c4d7ec;
        }
        .dd .ddChild A IMG {
            width: 26px;
            height: 26px;
        }
        .toaster {
            left: 30% !important;
            right: 30% !important;
            bottom: 350px !important;
        }
        .alert-info {
            filter: alpha(opacity=60) !important;
            opacity: 0.6 !important;
        }
    </style>
    <script type="text/javascript" th:src="@{'inc/common.js'}"></script>
    <script type="text/javascript" th:src="@{'js/jquery.my.js'}"></script>
    <script type="text/javascript" th:src="@{'js/jstree/jstree_inc_children.js'}"></script>
    <script type="text/javascript" th:src="@{'js/msdropdown/uncompressed.jquery.dd.js'}"></script>
    <script type="text/javascript" th:src="@{'js/jquery-ui/jquery-ui.my.js'}"></script>
    <script type="text/javascript" th:src="@{'js/jquery.toaster.js'}"></script>
    <script th:inline="javascript">
        if ("[(${windowSize})]" == "") {
            self.resizeTo(900, 730);
        }
        self.moveTo((screen.width - 900) / 2, (screen.height - 730) / 2);

        function closeSearchResult() {
            $("#user_search_close").hide();
            $("#usermulti-search-mode").hide();
            $("#userName").val("请输入用户真实姓名");
        }

        function changeSearchResult() {
            if ($("#userName").val() == "") {
                //将搜索隐藏
                $("#user_search_close").hide();
                $("#usermulti-search-mode").hide();
            }
        }
    </script>
</HEAD>
<BODY>
<h1 class="usermulti-top"><img th:src="@{'skin/images/user_multi_sel/user_top_icon.png'}">
    选择用户
</h1>
<!--选人内容开始-->
<div class="usermulti-main">
    <div class="usermulti-main-box1">
        <!--选人tab标签-->
        <ul>
            <li id="recently"><a href="javascript:;" onclick="changeCurrentMode(this,'recently')">
                最近
            </a></li>
            <li id="department" class="usermulti-main-box1-sel"><a href="javascript:;" onclick="changeCurrentMode(this,'department')">
                部门
            </a></li>
            <li id="role"><a href="javascript:;" onclick="changeCurrentMode(this,'role')">
                角色
            </a></li>
            <li id="group"><a href="javascript:;" onclick="changeCurrentMode(this,'group')">
                用户组
            </a></li>
        </ul>
    </div>
    <div class="usermulti-main-box2">
        <div class="usermulti-main-box2-cont">
            <div class="usermulti-cont-left">
                <!--用户搜索-->
                <div class="usermulti-search">
                    <input name="userName" id="userName" type="text" value="请输入用户真实姓名" oninput="changeSearchResult();" onpropertychange="changeSearchResult();">
                    <div class="usermulti-searchimg"><a href="javascript:;" onclick="searchUser();">
                        查找
                    </a></div>
                </div>
                <div class="user_search_close" id="user_search_close" onclick="closeSearchResult()" style="display:none">
                    <img title="关闭" src="skin/images/user_multi_sel/user_search_close.png"/></div>
                <!--搜索模块浮层-->
                <div class="usermulti-search-mode" id="usermulti-search-mode" style="display:none">
                    <div class="usermulti-search-result" id="usermulti-search-result">
                        <select name="webmenu5" id="webmenu5" style="width:300px;" size="24" multiple="true" ondblclick="notSelected(this);">
                        </select>
                    </div>
                </div>
                <!--最近模块-->
                <div class="urer-left-recently" id="urer-left-recently" style="display:none">
                    <select id='webmenu2' name='webmenu2' style='width:300px;' size='24' multiple='true' ondblclick='notSelected(this);'>
                        <span th:each="user, stat : ${recentSelectedList}" th:remove="tag">
                            <span th:switch="${stat.index}" th:remove="tag">
                                <option th:case="0" th:value='${user.name}' title='images/man.png' th:attr="myattr=${user.realName}" selected='selected' th:inline="text">[[${user.realName}]]</option>
                                <option th:case="*" th:value='${user.name}' title='images/man.png' th:attr="myattr=${user.realName}" th:inline="text">[[${user.realName}]]</option>
                            </span>
                        </span>
                    </select>
                </div>
                <!--左侧用户分类框上半部-->
                <div class="usermulti-left-class" id="usermulti-left-class1">
                    <!--收起箭头1 -->
                    <p class="usermulti-left-class-p1" id="usermulti-left-class-p1" onclick="p1showDepts()" style="cursor:pointer;display:none;"></p>
                        <div id="departmentTree" class="departmentTree"></div>
                        <div class="allRoles" id="allRoles" style="display:none">
                            <ul>
                                <li th:each="role, roleStat : ${roleList}" onMouseOver='addLiClass(this);' onMouseOut='removeLiClass(this);' onclick='getLiRole(this);' th:id='${role.code}' th:name='${role.code}'>&nbsp;&nbsp;&nbsp;&nbsp;[[${role.description}]]</li>
                            </ul>
                        </div>
                        <div class="allGroups" id="allGroups" style="display:none">
                            <ul>
                                <li th:each="group, stat:${groupList}" onMouseOver='addLiClass(this);' onMouseOut='removeLiClass(this);' onclick='getLiGroup(this);' th:id='${group.code}' th:name='${group.code}'>&nbsp;&nbsp;&nbsp;&nbsp;[[${group.description}]]</li>
                            </ul>
                        </div>
                        <!--收起箭头2--><p class="usermulti-left-class-p2" id="usermulti-left-class-p2" onclick="p2hideDepts()" style="cursor:pointer;"></p>
                </div>
                <!--左侧用户分类框下半部-->
                <div class="usermulti-left-class" id="usermulti-left-class2">
                    <!--收起箭头3--><p class="usermulti-left-class-p3" id="usermulti-left-class-p3" onclick="p3hideDeptUsers()" style="cursor:pointer;"></p>
                    <div id="deptUsers" class="deptUsers">
                        <select name="webmenu" id="webmenu" style="width:298px; height:203px" size="11" multiple="true" ondblclick="notSelected(this);">
                        </select>
                    </div>
                    <div id="roleUsers" class="roleUsers" style="display:none">
                        <select name="webmenu3" id="webmenu3" style="width:298px;" size="11" multiple="true" ondblclick="notSelected(this);">
                        </select>
                    </div>
                    <div id="groupUsers" class="groupUsers" style="display:none">
                        <select name="webmenu4" id="webmenu4" style="width:298px;" size="11" multiple="true" ondblclick="notSelected(this);">
                        </select>
                    </div>
                    <!--收起箭头4 -->
                    <p class="usermulti-left-class-p4" id="usermulti-left-class-p4" onclick="p4showDeptUsers()" style="cursor:pointer;display:none;"></p>
                </div>
            </div>
            <div class="usermulti-cont-right">
                <div class="usermulti-cont-right-title">
                    <span><img th:src="@{'skin/images/user_multi_sel/user_icon1.jpg'}" width="18" height="18">已选人员</span>
                    <div class="usermulti-right-title-div">
                        <span th:if="${canSaveUserGroupShow}">
                            <img th:src="@{'skin/images/user_multi_sel/user_icon2.jpg'}" width="18" height="18">
                            <a title="可以将已选择的用户保存为用户组" href="javascript:;" onclick="addUserGroup();" id="addUserGroup">
                            保存为组
                            </a>
                        </span>
                        <span><img th:src="@{'skin/images/user_multi_sel/user_icon3.jpg'}" width="18" height="18">
                            <a href="javascript:;" onclick="clearUsers();">清空</a>
                        </span>
                    </div>
                </div>
                <!--保存为组的dialog -->
                <div name="userGroupDialog" id="userGroupDialog" style="display:none">
                    <div><label for="groupDescription">
                        用户组描述
                    </label><input id="groupDescription" name="groupDescription" value="" style="width:140px;"/><font color="red">&nbsp;*</font></div>
                </div>
                <!--右侧已选用户-->
                <div class="usermulti-cont-right-user" id="usermulti-cont-right-user">
                    <select name="websites" id="websites" style="width:300px;" size="24" multiple="true" ondblclick="hasSelected();">
                    </select>
                </div>
            </div>
            <!--圆形全选图标-->
            <div id="usermulti-cont-arrowall" class="usermulti-cont-arrowall" title="全部右移" onclick="notSelected(this);"></div>
            <!--圆形右移图标-->
            <div id="usermulti-cont-arrowright" class="usermulti-cont-arrowright" title="右移" onclick="notSelected(this);"></div>
            <!--圆形左移图标-->
            <div id="usermulti-cont-arrowleft" class="usermulti-cont-arrowleft" title="删除" onclick="hasSelected();"></div>
            <!--圆形上移图标-->
            <div id="usermulti-cont-arrowup" class="usermulti-cont-arrowup" title="上移" onclick="upSelected();"></div>
            <!--圆形下移图标-->
            <div id="usermulti-cont-arrowbottom" class="usermulti-cont-arrowbottom" title="下移" onclick="downSelected();"></div>
            <!--圆形置顶图标-->
            <div id="usermulti-cont-arrowstick" class="usermulti-cont-arrowstick" title="置顶" onclick="topSelected();"></div>
            <!--圆形置尾图标-->
            <div id="usermulti-cont-arrowlower" class="usermulti-cont-arrowlower" title="置尾" onclick="bottomSelected();"></div>
        </div>
        <div class="usermulti-btn-box" style="text-align:left" th:if="${'flow' eq from}">
            <input type="radio" name="selType" id="selTypeb" value="0" checked="checked"/>会签&nbsp;&nbsp;
            <input type="radio" name="selType" id="selTypec" value="1"/>串签
        </div>
        <div class="usermulti-btn-box">
            <div class="usermulti-cont-btn1" onClick="setUsers()" id="setUsers">
                确定
            </div>
            <div class="usermulti-cont-btn2" onclick="window.close()">
                关闭
            </div>
        </div>
    </div>
</div>
</BODY>
<script th:inline="javascript">
    var currentMode = "department";
    var selectedLiRoleCode = "";
    var selectedLiGroupCode = "";
    var oHandler1;
    $(document).ready(function () {
        $('#departmentTree').jstree({
                "core": {
                    "data": [(${treeJsonData})],
                "themes": {
                    "theme": "default",
                    "dots": true,
                    "icons": true
                },
                "check_callback": true,
            },
            "ui": {
                "initially_select": ["root"]
            },
            [# th:switch="${isIncludeChildren}" ]
                [# th:case="true" ]
                "checkbox": {
                    "tie_selection": true,
                    "whole_node": true,
                    "three_state": true,
                    "keep_selected_style": true
                },
                "plugins": ["wholerow", "themes", "ui", , "types", "checkbox"], // 发通知时不保留状态，以免用户过多卡住
                [/]
                [# th:case="*" ]
                "plugins": ["wholerow", "themes", "ui", "types", "state"],
                [/]
            [/]
        })
        [# th:switch="${isIncludeChildren}" ]
            [# th:case="true" ]
                .on('changed.jstree', function (e, data) {
                    //取得所有选中的节点，返回节点对象的集合
                    var ids = "";
                    var nodes = $("#departmentTree").jstree("get_checked"); //使用get_checked方法
                    $.each(nodes, function (i, n) {
                        if (ids == "") {
                            ids = data.instance.get_node(n).id;
                        } else {
                            ids += "," + data.instance.get_node(n).id;
                        }
                    });

                    ajaxGetDeptUsers(ids);
                })
            [/]
            [# th:case="*" ]
                .bind('select_node.jstree', function (e, data) {//绑定选中事件
                    ajaxGetDeptUsers(data.node.id);
                });
            [/]
        [/]
        try {
            //是否有限定部门
            var dlg = window.opener ? window.opener : dialogArguments;
            var depts = "";
            try {
                depts = dlg.getDepts();
            } catch (e) {
                try {
                    depts = dlg.getDept();
                } catch (e) {
                    depts = "";
                }
            }

            if (depts != "") {
                $("#recently").hide();//隐藏“最近”选人模块
                $("#role").hide();//隐藏“角色”选人模块
                $("#group").hide();//隐藏“用户组”选人模块
            } else {
                $("#urer-left-recently select").msDropDown();//初始化最近选择用户select
                $("#roleUsers select").msDropDown();//初始化角色用户的select
                $("#groupUsers select").msDropDown();//初始化用户组用户的select
            }

            $("#deptUsers select").msDropDown();//初始化部门用户的select
            $("#usermulti-search-result select").msDropDown().data("dd");//初始化搜索用户的select

            if (currentMode == "department") {
                // 因为uncompressed.jquery.dd.js对于option高度计算有误，所以此处再次初始化一下
                $("#webmenu_child").css("height", "203px");
            }

            initUsers();//初始化传进来的所有用户
        } catch (e) {
            alert(e.message);
        }

        //搜索框获取焦点后，绑定Enter快捷键事件,会点击查询按钮
        document.getElementById("userName").onfocus = function () {
            if (this.value == '请输入用户真实姓名') {
                this.value = '';
            }
            document.onkeypress = function (event) {
                var e = event || window.event;
                if (e.keyCode == 13) {
                    searchUser();
                }
            };
        };
        //搜索框获取焦点后，接触Enter快捷键事件,不然会一直点击“查询”按钮
        document.getElementById("userName").onblur = function () {
            if (this.value == "") {
                this.value = '请输入用户真实姓名';
            }
            document.onkeypress = "";
        };
    });

    function initUsers() {
        [# th:if="${mode eq 'single'}" ]
            oHandler1 = $("#websites").msDropDown().data("dd");//初始化已选用户的select
            $("#websites_child").css("height", "444px");
            return;
        [/]
        var dlg = window.opener ? window.opener : dialogArguments;
        var userNames;
        var userRealNames;
        try {
            // 不能直接调用dlg.setPerson，因为有可能是从表单中UserSelectWinCtl调用
            [# th:switch="${isForm}" ]
                [# th:case="true" ]
                userNames = dlg.getMultiSelUserNames();
                userRealNames = dlg.getMultiSelUserRealNames();
                [/]
                [# th:case="*" ]
                userNames = dlg.getSelUserNames();
                userRealNames = dlg.getSelUserRealNames();
                [/]
            [/]
        } catch (e) {
            userNames = "";
            userRealNames = "";
        }

        if (userNames != "") {
            $.ajax({
                type: "post",
                url: "user/initUsers.do",
                data: {
                    "userNames": userNames
                },
                dataType: "html",
                beforeSend: function (XMLHttpRequest) {
                },
                complete: function (XMLHttpRequest, status) {
                },
                success: function (data, status) {
                    var re = $.parseJSON(data);
                    if (re.ret == "1") {
                        document.getElementById("usermulti-cont-right-user").innerHTML = re.result;
                        oHandler1 = $("#websites").msDropDown().data("dd");//初始化已选用户的select
                        $("#websites_child").css("height", "444px");
                    }
                },
                error: function () {
                }
            });
        }
        oHandler1 = $("#websites").msDropDown().data("dd");//初始化已选用户的select
        $("#websites_child").css("height", "444px");

    }

    function setUsers() {
        var dlg = window.opener ? window.opener : dialogArguments;
        var allUsers = $("#websites option");
        if (allUsers.length == 0) {
            // 不能直接调用dlg.setPerson，因为有可能是从表单中UserSelectWinCtl调用
            [# th:switch="${isForm}" ]
                [# th:case="true" ]
                dlg.setIntpuObjValue("", "");
                [/]
                [# th:case="*" ]
                    [# th:switch="${mode}"]
                        [# th:case="single"]
                            [# th:switch="parameterNum" ]
                                [# th:case="2"]
                                    dlg.setPerson("", "");
                                [/]
                                [# th:case="4"]
                                    dlg.setPerson("", "", "", "");
                                [/]
                            [/]
                        [/]
                        [# th:case="*"]
                        dlg.setUsers("", "");
                        [/]
                    [/]
                [/]
            [/]
            window.close();
            return;
        }
        var userNames = "";
        var userRealNames = "";
        for (var i = 0; i < allUsers.length; i++) {
            userNames += allUsers.eq(i).val() + ",";
            userRealNames += allUsers.eq(i).html() + ",";
        }
        userNames = userNames.substring(0, userNames.length - 1);
        userRealNames = userRealNames.substring(0, userRealNames.length - 1);
        //第一步：更新表user_recently_selected选择的用户，第二步：返回选的用户（不用刷新“最近”模块了，因为窗口关闭了）
        $.ajax({
            type: "post",
            url: "user-recently-selected/update.do",
            data: {
                "userNames": userNames
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
                // 不能直接调用dlg.setPerson，因为有可能是从表单中UserSelectWinCtl调用
                [# th:switch="${isForm}"]
                    [# th:case="true"]
                    dlg.setIntpuObjValue(userNames, userRealNames);
                    [/]
                    [# th:case="*"]
                        [# th:switch="${mode}"]
                            [# th:case="single"]
                                [# th:switch="parameterNum" ]
                                    [# th:case="2"]
                                        dlg.setPerson(userNames, userRealNames);
                                    [/]
                                    [# th:case="4"]
                                        dlg.setPerson("", "", userNames, userRealNames);
                                    [/]
                                [/]
                            [/]
                            [# th:case="*"]
                                var val = $('input:radio[name="selType"]:checked').val();
                                var isSeries = false;
                                if (val == 0) {
                                    //并发
                                    if (allUsers.length == 1) {
                                        //如果只选择了一个
                                        isSeries = true;
                                    } else {
                                        isSeries = false;
                                    }
                                } else {
                                    //串签
                                    isSeries = true;
                                }
                            [/]
                        [/]
                        [# th:switch="${from}"]
                            [# th:case="flow"]
                            dlg.setUsers(userNames, userRealNames, isSeries);
                            [/]
                            [# th:case="*"]
                            dlg.setUsers(userNames, userRealNames);
                            [/]
                        [/]
                    [/]
                [/]
                window.close();
            },
            success: function (data, status) {
            },
            error: function () {
            }
        });
    }

    function changeCurrentMode(obj, flag) {
        if (currentMode == flag) {
            return;
        }
        $("#" + currentMode).removeClass("usermulti-main-box1-sel");//给旧的模块去掉样式
        $("#" + flag).addClass("usermulti-main-box1-sel");//给新的模块加样式
        //将搜索隐藏
        $("#user_search_close").hide();
        $("#usermulti-search-mode").hide();
        $("#userName").val("请输入用户真实姓名");
        currentMode = flag;
        if (flag == "recently") {
            $("#urer-left-recently").show();
            $("#webmenu2_child").css("height", "440px");
            $("#usermulti-left-class1").hide();
            $("#usermulti-left-class2").hide();
        } else if (flag == "department") {
            $("#urer-left-recently").hide();
            $("#usermulti-left-class1").show();
            $("#usermulti-left-class2").show();
            $("#usermulti-left-class1").css("height", "217px");
            $("#usermulti-left-class2").css("height", "217px");
            $("#usermulti-left-class-p1").hide();
            $("#usermulti-left-class-p2").show();
            $("#usermulti-left-class-p3").show();
            $("#usermulti-left-class-p4").hide();
            $("#departmentTree").show();
            $("#departmentTree").css("height", "194px");
            $("#deptUsers").show();
            $("#webmenu_child").css("height", "203px");
            $("#allRoles").hide();
            $("#roleUsers").hide();
            $("#allGroups").hide();
            $("#groupUsers").hide();
        } else if (flag == "role") {
            $("#urer-left-recently").hide();
            $("#usermulti-left-class1").show();
            $("#usermulti-left-class2").show();
            $("#usermulti-left-class1").css("height", "217px");
            $("#usermulti-left-class2").css("height", "217px");
            $("#usermulti-left-class-p1").hide();
            $("#usermulti-left-class-p2").show();
            $("#usermulti-left-class-p3").show();
            $("#usermulti-left-class-p4").hide();
            $("#departmentTree").hide();
            $("#deptUsers").hide();
            $("#allRoles").show();
            $("#allRoles").css("height", "194px");
            $("#roleUsers").show();
            $("#webmenu3_child").css("height", "203px");
            $("#allGroups").hide();
            $("#groupUsers").hide();
            if (selectedLiRoleCode == "") {
                selectedLiRoleCode = "member";
                getLiRole(document.getElementById("member"));
            }
        } else if (flag == "group") {
            $("#urer-left-recently").hide();
            $("#usermulti-left-class1").show();
            $("#usermulti-left-class2").show();
            $("#usermulti-left-class1").css("height", "217px");
            $("#usermulti-left-class2").css("height", "217px");
            $("#usermulti-left-class-p1").hide();
            $("#usermulti-left-class-p2").show();
            $("#usermulti-left-class-p3").show();
            $("#usermulti-left-class-p4").hide();
            $("#departmentTree").hide();
            $("#deptUsers").hide();
            $("#allRoles").hide();
            $("#roleUsers").hide();
            $("#allGroups").show();
            $("#allGroups").css("height", "194px");
            $("#groupUsers").show();
            $("#webmenu4_child").css("height", "203px");
            if (selectedLiGroupCode == "") {
                selectedLiGroupCode == "Everyone";
                getLiGroup(document.getElementById("Everyone"));
            }
        }
    }

    function p1showDepts() {
        $("#usermulti-left-class-p1").hide();
        $("#usermulti-left-class-p2").show();
        $("#usermulti-left-class-p3").hide();
        $("#usermulti-left-class-p4").show();
        $("#usermulti-left-class1").css("height", "424px");
        $("#usermulti-left-class2").css("height", "12px");
        if (currentMode == "department") {
            $("#departmentTree").show();
            $("#departmentTree").css("height", "412px");
            $("#deptUsers").hide();
        } else if (currentMode == "role") {
            $("#allRoles").show();
            $("#allRoles").css("height", "412px");
            $("#roleUsers").hide();
        } else if (currentMode == "group") {
            $("#allGroups").show();
            $("#allGroups").css("height", "412px");
            $("#groupUsers").hide();
        }
    }

    function p2hideDepts() {
        if (currentMode == "department") {
            if ($("#usermulti-left-class1").css("height") == "217px") {
                $("#usermulti-left-class-p1").show();
                $("#usermulti-left-class-p2").hide();
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "12px");
                $("#usermulti-left-class2").css("height", "424px");
                $("#departmentTree").hide();
                $("#webmenu_child").css("height", "410px");
            } else {
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#departmentTree").css("height", "194px");
                $("#deptUsers").show();
                $("#webmenu_child").css("height", "203px");
            }
        } else if (currentMode == "role") {
            if ($("#usermulti-left-class1").css("height") == "217px") {
                $("#usermulti-left-class-p1").show();
                $("#usermulti-left-class-p2").hide();
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "12px");
                $("#usermulti-left-class2").css("height", "424px");
                $("#allRoles").hide();
                $("#webmenu3_child").css("height", "410px");
            } else {
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#allRoles").css("height", "194px");
                $("#roleUsers").show();
                $("#webmenu3_child").css("height", "203px");
            }
        } else if (currentMode == "group") {
            if ($("#usermulti-left-class1").css("height") == "217px") {
                $("#usermulti-left-class-p1").show();
                $("#usermulti-left-class-p2").hide();
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "12px");
                $("#usermulti-left-class2").css("height", "424px");
                $("#allGroups").hide();
                $("#webmenu4_child").css("height", "410px");
            } else {
                $("#usermulti-left-class-p3").show();
                $("#usermulti-left-class-p4").hide();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#allGroups").css("height", "194px");
                $("#groupUsers").show();
                $("#webmenu4_child").css("height", "203px");
            }
        }
    }

    function p3hideDeptUsers() {
        if (currentMode == "department") {
            if ($("#usermulti-left-class2").css("height") == "217px") {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class-p3").hide();
                $("#usermulti-left-class-p4").show();
                $("#usermulti-left-class1").css("height", "424px");
                $("#usermulti-left-class2").css("height", "12px");
                $("#deptUsers").hide();
                $("#departmentTree").css("height", "412px");
            } else {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#departmentTree").show();
                $("#departmentTree").css("height", "194px");
                $("#webmenu_child").css("height", "203px");
            }
        } else if (currentMode == "role") {
            if ($("#usermulti-left-class2").css("height") == "217px") {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class-p3").hide();
                $("#usermulti-left-class-p4").show();
                $("#usermulti-left-class1").css("height", "424px");
                $("#usermulti-left-class2").css("height", "12px");
                $("#roleUsers").hide();
                $("#allRoles").css("height", "412px");
            } else {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#allRoles").show();
                $("#allRoles").css("height", "194px");
                $("#webmenu3_child").css("height", "203px");
            }
        } else if (currentMode == "group") {
            if ($("#usermulti-left-class2").css("height") == "217px") {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class-p3").hide();
                $("#usermulti-left-class-p4").show();
                $("#usermulti-left-class1").css("height", "424px");
                $("#usermulti-left-class2").css("height", "12px");
                $("#groupUsers").hide();
                $("#allGroups").css("height", "412px");
            } else {
                $("#usermulti-left-class-p1").hide();
                $("#usermulti-left-class-p2").show();
                $("#usermulti-left-class1").css("height", "217px");
                $("#usermulti-left-class2").css("height", "217px");
                $("#allGroups").show();
                $("#allGroups").css("height", "194px");
                $("#webmenu4_child").css("height", "203px");
            }
        }
    }

    function p4showDeptUsers() {
        $("#usermulti-left-class-p1").show();
        $("#usermulti-left-class-p2").hide();
        $("#usermulti-left-class-p3").show();
        $("#usermulti-left-class-p4").hide();
        $("#usermulti-left-class1").css("height", "12px");
        $("#usermulti-left-class2").css("height", "424px");
        if (currentMode == "department") {
            $("#departmentTree").hide();
            $("#deptUsers").show();
            $("#webmenu_child").css("height", "412px");
        } else if (currentMode == "role") {
            $("#allRoles").hide();
            $("#roleUsers").show();
            $("#webmenu3_child").css("height", "412px");
        } else if (currentMode == "group") {
            $("#allGroups").hide();
            $("#groupUsers").show();
            $("#webmenu4_child").css("height", "412px");
        }
    }

    //重置已选人员的select
    function resetSelected() {
        var options = $("#websites option");
        if (options.length > 0) {
            var optionsSelected = $("#websites option:selected");
            if (optionsSelected.length == 0) {
                options.eq(0).attr("selected", true);
            }
        }
        try {
            oHandler1.destroy(); // 部分IE11、360、chrome不支持destroy()方法
        } catch (e) {
        }
        oHandler1 = $("#websites").msDropDown().data("dd");
        $("#websites_child").css("height", "444px");
    }

    function userIsExist(obj) {
        [# th:if="${form eq 'flow'}" ]
            if ($('input:radio[name="selType"]:checked').val() == 1) {
                return false;
            }
        [/]
        var isExist = false;
        var options = $("#websites option");//option集合
        for (var i = 0; i < options.length; i++) {
            if (obj.value == options.eq(i).get(0).value) {
                isExist = true;
                break;
            }
        }
        return isExist;
    }

    function notSelected(obj) {
        var selected;
        if (document.getElementById("usermulti-search-mode").style.display == "none") {
            if (obj.id == "usermulti-cont-arrowall") {
                if (currentMode == "recently") {
                    selected = $("#webmenu2 option");
                } else if (currentMode == "department") {
                    selected = $("#webmenu option");
                } else if (currentMode == "role") {
                    selected = $("#webmenu3 option");
                } else if (currentMode == "group") {
                    selected = $("#webmenu4 option");
                }
            } else {
                if (currentMode == "recently") {
                    selected = $("#webmenu2 option:selected");
                } else if (currentMode == "department") {
                    selected = $("#webmenu option:selected");
                } else if (currentMode == "role") {
                    selected = $("#webmenu3 option:selected");
                } else if (currentMode == "group") {
                    selected = $("#webmenu4 option:selected");
                }
            }
        } else {
            if (obj.id == "usermulti-cont-arrowall") {
                selected = $("#webmenu5 option");
            } else {
                selected = $("#webmenu5 option:selected");
            }
        }

        if (selected.length == 0) {
            return;
        }

        if ("[(${mode})]" == "single") {
            if ($("#websites option").length > 0) {
                alert("只能选择一个用户");
                return;
            }
            if (selected.length > 1) {
                alert("只能选择一个用户");
                return;
            }
        }

        // 先重置，再添加
        resetSelected();

        var str = '<select name="websites" id="websites" style="width:300px;" size="24" multiple="true" ondblclick="hasSelected();">';

        var options = $("#websites option");

        for (var i = 0; i < options.length; i++) {
            obj = options.eq(i).get(0);
            str += "<option value='" + obj.value + "' title='" + obj.getAttribute("title") + "'>" + obj.text + "</option>";
        }
        for (var i = 0; i < selected.length; i++) {
            obj = selected.eq(i).get(0);
            if (userIsExist(obj)) {
                continue;
            }
            str += "<option value='" + obj.value + "' title='" + obj.getAttribute("title") + "'>" + obj.getAttribute("myattr") + "</option>";
        }
        str += '</select>';

        document.getElementById("usermulti-cont-right-user").innerHTML = str;
        try {
            oHandler1 = $("#websites").msDropDown().data("dd");
        } catch (e) {
        }
        $("#websites_child").css("height", "444px");
    }

    function hasSelected() {
        var selected = $("#websites option:selected");//option集合
        for (var i = selected.length - 1; i >= 0; i--) {
            oHandler1.remove(selected.eq(i).index());
        }
    }

    function topSelected() {
        //第一步：将select排序
        var selectedA = $("#websites option:selected");//option集合
        for (var i = selectedA.length - 1; i >= 0; i--) {
            var obj = selectedA.eq(i);
            obj.prependTo($('#websites'));
        }
        //第二步:重置select，使前台页面显示实时更新
        resetSelected();
    }

    function bottomSelected() {
        //第一步：将select排序
        var selectedA = $("#websites option:selected");
        for (var i = 0; i < selectedA.length; i++) {
            var obj = selectedA.eq(i);
            obj.appendTo($('#websites'));
        }
        //第二步:重置select，使前台页面显示实时更新
        resetSelected();
    }

    function upSelected() {
        //第一步：将select排序
        var selected = $("#usermulti-cont-right-user li");
        var optionsAsA = selectedOptionsAsA(selected);
        for (var i = 0; i < optionsAsA.length; i++) {
            var obj = optionsAsA[i];
            var optionIndex = obj.get(0).index;
            if (optionIndex > 0) {
                obj.insertBefore(obj.prev('option'));
                selected.eq(optionIndex).insertBefore(selected.eq(optionIndex - 1));
            } else {
                obj.appendTo($('#websites'));
                selected = $("#usermulti-cont-right-user a");
                selected.eq(optionIndex).appendTo($(selected.eq(optionIndex).get(0).parentNode));
            }
        }
        //第二步:重置select，使前台页面显示实时更新
        //resetSelected();
    }

    function downSelected() {
        //第一步：将select排序
        var selected = $("#usermulti-cont-right-user li");
        var optionsAsA = selectedOptionsAsA(selected);
        for (var i = optionsAsA.length - 1; i >= 0; i--) {
            var obj = optionsAsA[i];
            var optionIndex = obj.get(0).index;
            if (optionIndex < $("#websites option").size() - 1) {
                obj.insertAfter(obj.next('option'));
                selected.eq(optionIndex).insertAfter(selected.eq(optionIndex + 1));
            } else {
                obj.prependTo($('#websites'));
                selected = $("#usermulti-cont-right-user a");
                selected.eq(optionIndex).prependTo($(selected.eq(optionIndex).get(0).parentNode));
            }
        }
        //第二步:重置select，使前台页面显示实时更新
        //resetSelected();
    }

    //根据所有选中a元素的位置，获取对应位置的option，并顺序放到数组中，因为直接$("#websites option:selected");会出现不同的已选option
    function selectedOptionsAsA(selected) {
        var selectedA = $("#websites option");//option集合
        var num = 0;
        var options = new Array();
        for (var i = 0; i < selected.length; i++) {
            if (selected.eq(i).hasClass("selected")) {
                options[num] = selectedA.eq(i);
                num++;
            }
        }
        return options;
    }

    // js在节点后面加入新的节点
    function insertAfter(newElement, targetElement) {
        //得到父节点
        var parent = targetElement.parentNode;
        //如果最后一个子节点是当前元素，那么直接添加即可
        if (parent.lastChild === targetElement) {
            parent.appendChild(newElement);
        } else {
            //否则，在当前节点的下一个节点之前添加
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }

    function clearUsers() {
        var usersLength = $("#websites option").length;
        if (usersLength > 0) {
            $("#websites option").remove();
            resetSelected();
        }
    }

    function addUserGroup() {
        var allUsers = $("#websites option");
        if (allUsers.length <= 0) {
            jAlert("请先选择用户，再保存为组", "[(#{prompt})]");
        } else {
            //弹出dialog对话框，输入用户组的code、description
            $("#userGroupDialog").dialog({
                modal: true,
                bgiframe: true,
                title: "添加用户组",
                closeText: "关闭",
                buttons: {
                    "确定": function () {
                        // 用户组的编码和描述不能为空
                        if ($("#groupDescription").val() != '') {
                            var pattern = new RegExp("'");
                            if (pattern.test($("#groupDescription").val())) {
                                alert("用户组描述不能包含‘字符");
                                return;
                            }
                            //取出所有用户，中间以逗号隔开，放入users变量中
                            var users = "";
                            for (var i = 0; i < allUsers.length; i++) {
                                users += allUsers.eq(i).get(0).value + ",";
                            }
                            users = users.substring(0, users.length - 1);
                            $.ajax({
                                url: "admin/addUserGroup.do",
                                type: "post",
                                dataType: "html",
                                data: {
                                    userNames: users,
                                    desc: $("#groupDescription").val()
                                },
                                success: function (data, status) {
                                    var re = $.parseJSON(data);
                                    if (re.ret == "2") {
                                        alert(re.result);
                                    } else if (re.ret == "1") {
                                        $("#groupDescription").val("");
                                        //刷新用户组模块
                                        refreshUserGroup();
                                    }
                                },
                                error: function (XMLHttpRequest, textStatus) {
                                    alert("添加用户组失败");
                                }
                            });
                            $(this).dialog("close");
                        } else {
                            alert("用户组描述不能为空");
                        }
                    },
                    "取消": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#setUsers").focus();
        }
    }

    function ajaxGetDeptUsers(code) {
        //是否有限定部门
        var dlg = window.opener ? window.opener : dialogArguments;
        var depts = "";
        try {
            depts = dlg.getDepts();
        } catch (e) {
            try {
                depts = dlg.getDept();
            } catch (e1) {
                depts = "";
            }
        }
        $.ajax({
            type: "post",
            url: "user/getDeptUsers.do",
            data: {
                op: "getDeptUsers",
                deptCode: code,
                isIncludeChildren: "[(${isIncludeChildren})]",
                limitDepts: depts
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
            },
            success: function (data, status) {
                var re = $.parseJSON(data);
                if (re.ret == "1") {
                    document.getElementById("deptUsers").innerHTML = re.result;
                    try {
                        $("#deptUsers select").msDropDown();
                    } catch (e) {
                    }
                    $("#usermulti-left-class-p3").show();
                    $("#usermulti-left-class-p4").hide();
                    $("#usermulti-left-class1").css("height", "217px");
                    $("#usermulti-left-class2").css("height", "217px");
                    $("#departmentTree").css("height", "194px");
                    $("#deptUsers").show();
                    $("#webmenu_child").css("height", "203px");
                }
            },
            error: function (XMLHttpRequest, textStatus) {
                alert(XMLHttpRequest.responseText);
                $.toaster({
                    "priority": "info",
                    "message": "获取用户出错"
                });
            }
        });
    }

    function searchUser() {
        if ($("#userName").val() == "请输入用户真实姓名" || $("#userName").val() == "") {
            jAlert("请输入用户真实姓名", "[(#{prompt})]");
            return;
        }
        //是否有限定部门
        var dlg = window.opener ? window.opener : dialogArguments;
        var depts = "";
        if (typeof dlg.getDept != 'undefined' && dlg.getDept instanceof Function) {
            depts = dlg.getDept();
        }

        $.ajax({
            type: "post",
            url: "user/searchUsers.do",
            contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
            data: {
                userName: $("#userName").val(),
                limitDepts: depts
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
            },
            success: function (data, status) {
                var re = $.parseJSON(data);
                if (re.ret == "1") {
                    if (re.result.indexOf("<option") != -1) {
                        $("#user_search_close").show();
                        $("#usermulti-search-mode").show();
                        document.getElementById("usermulti-search-result").innerHTML = re.result;
                        $("#usermulti-search-result select").msDropDown().data("dd");
                        $("#webmenu5_child").css("height", "442px");
                    } else {
                        jAlert("无此用户", "[(#{prompt})]");
                    }

                }
            },
            error: function () {
                $.toaster({
                    "priority": "info",
                    "message": "搜索用户出错"
                });
            }
        });
    }

    function addLiClass(obj) {
        if ($(obj).hasClass('liClick')) {
        } else {
            if ($(obj).hasClass('liMouseOver')) {
            } else {
                $(obj).addClass('liMouseOver');
            }
        }
    }

    function removeLiClass(obj) {
        if ($(obj).hasClass('liClick')) {
        } else {
            if ($(obj).hasClass('liMouseOver')) {
                $(obj).removeClass('liMouseOver');
            }
        }
    }

    function getLiRole(obj) {
        var allChildNode = obj.parentNode.childNodes;
        for (var i = 0; i < allChildNode.length; i++) {
            if (allChildNode[i] == obj) {
                if ($(allChildNode[i]).hasClass('liClick')) {
                } else {
                    $(allChildNode[i]).addClass('liClick');
                }
                if ($(allChildNode[i]).hasClass('liMouseOver')) {
                    $(allChildNode[i]).removeClass('liMouseOver');
                }
            } else {
                if ($(allChildNode[i]).hasClass('liClick')) {
                    $(allChildNode[i]).removeClass('liClick');
                }
            }
        }
        selectedLiRoleCode = $(obj).attr("name");
        $.ajax({
            type: "post",
            url: "user/getRoleUsers.do",
            data: {
                roleCode: $(obj).attr("name")
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
            },
            success: function (data, status) {
                var re = $.parseJSON(data);
                if (re.ret == "1") {
                    document.getElementById("roleUsers").innerHTML = re.result;
                    $("#roleUsers select").msDropDown();
                    $("#usermulti-left-class-p3").show();
                    $("#usermulti-left-class-p4").hide();
                    $("#usermulti-left-class1").css("height", "217px");
                    $("#usermulti-left-class2").css("height", "217px");
                    $("#roleUsers").show();
                    $("#webmenu3_child").css("height", "203px");
                }
            },
            error: function () {
                $.toaster({
                    "priority": "info",
                    "message": "获取用户出错"
                });
            }
        });
    }

    function getLiGroup(obj) {
        var allChildNode = obj.parentNode.childNodes;
        for (var i = 0; i < allChildNode.length; i++) {
            if (allChildNode[i] == obj) {
                if ($(allChildNode[i]).hasClass('liClick')) {
                } else {
                    $(allChildNode[i]).addClass('liClick');
                }
                if ($(allChildNode[i]).hasClass('liMouseOver')) {
                    $(allChildNode[i]).removeClass('liMouseOver');
                }
            } else {
                if ($(allChildNode[i]).hasClass('liClick')) {
                    $(allChildNode[i]).removeClass('liClick');
                }
            }
        }
        selectedLiGroupCode = $(obj).attr("name");
        $.ajax({
            type: "post",
            url: "user/getGroupUsers.do",
            data: {
                groupCode: $(obj).attr("name")
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
            },
            success: function (data, status) {
                var re = $.parseJSON(data);
                if (re.ret == "1") {
                    document.getElementById("groupUsers").innerHTML = re.result;
                    $("#groupUsers select").msDropDown();
                    $("#usermulti-left-class-p3").show();
                    $("#usermulti-left-class-p4").hide();
                    $("#usermulti-left-class1").css("height", "217px");
                    $("#usermulti-left-class2").css("height", "217px");
                    $("#groupUsers").show();
                    $("#webmenu4_child").css("height", "203px");
                }
            },
            error: function () {
                $.toaster({
                    "priority": "info",
                    "message": "获取用户出错"
                });
            }
        });
    }

    function refreshUserGroup() {
        $.ajax({
            type: "post",
            url: "admin/refreshUserGroup.do",
            data: {
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
            },
            complete: function (XMLHttpRequest, status) {
            },
            success: function (data, status) {
                var re = $.parseJSON(data);
                if (re.ret == "1") {
                    document.getElementById("allGroups").innerHTML = re.result;
                    $("#" + selectedLiGroupCode).addClass('liClick');//刷新之后还是要让之前点击的那个用户组还原被点击的样式
                }
            },
            error: function () {
            }
        });
    }
</script>
</HTML>
